﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/scripts/jquery.js"></script>
    <script src="~/scripts/jquery.validate.js"></script>
    <script src="~/scripts/messages_zh.js"></script>
    <style>
        .hidden {
            display: none;
        }

        .red {
            color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm())
    {
        <p>
            用户名： <input type="text" id="username" name="username" onblur="checkUsername()" />
            <span class="hidden red" id="userNameTips">请输入用户名</span>
        </p>
        <p>密码：<input type="password" id="password" /></p>
        <p>确认密码<input type="password" id="password2" /></p>
        <p><span class="hidden red" id="passwordTips">两次密码不一致</span></p>
        <button type="submit">提交</button>
    }
    <script>
        function checkUsername() {
            if ($("#username").val() == "") {
                $("#userNameTips").removeClass("hidden");
                return false;
            } else {
                $("#userNameTips").addClass("hidden");
                return true;
            }
        }
        function checkPassword() {
            if ($("#password").val() != $("#password2").val() {
                $("#password").removeClass("hidden");
                return false;
            } else {
                $("#userNameTips").addClass("hidden");
                return true;
            }
        }
        function checkForm() {
            return checkUsername();
        }
        $(document).ready(function () {
            $("form").bind("submit", checkForm)
        })
    </script>
</body>
</html>
